<template>
  <div class="app-main-container">
    <div class="warnningTip">注：创建商户类型请先配置商户角色及小程序模板</div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearFilters"
    />
    <div v-if="meta.indexOf('ShopTypeAdd') > -1" class="mb20">
      <el-button type="primary" @click="handleEdit()">新增</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="商户类型名称"
        prop="name"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="关联角色"
        prop="roleName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="关联小程序模板"
        prop="templateName"
        min-width="130"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="收款模式"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.payPattern == 1
              ? '场馆收款'
              : '商户收款'
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="已关联商户数"
        prop="num"
        min-width="120"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
          >
            <div class="Info_wrap">
              <div
                v-for="item in scope.row.shopNameList"
                :key="item"
                style="padding: 6px 2px"
              >
                {{ item }}
              </div>
            </div>
            <span slot="reference" class="primaryColor pointer">{{ scope.row.num }}</span>
          </el-popover>
          <!-- <span class="primaryColor pointer" @click="priviewShops(scope.row)">{{ scope.row.num }}</span> -->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="备注"
        prop="remark"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="排序码"
        prop="sortNum"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="创建时间"
        prop="createTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="创建人"
        prop="creatorName"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        min-width="120"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('ShopTypeEdit') > -1"
              v-preventReClick
              type="text"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="meta.indexOf('ShopTypeDel') > -1"
              v-preventReClick
              class="red"
              type="text"
              @click="handleDel(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />

    <el-dialog
      v-if="isShowEdit"
      :title="param.id ? '编辑':'新建'"
      :visible.sync="isShowEdit"
      width="600px"
    >
      <el-form ref="form" :model="param" :rules="rules" label-width="140px" label-suffix="：">
        <el-form-item label="商户类型名称" prop="name">
          <el-input
            v-model="param.name"
            class="w400"
            placeholder="请输入商户类型名称"
          />
        </el-form-item>
        <el-form-item label="关联角色" prop="roleId">
          <el-select v-model="param.roleId" class="w400" placeholder="请选择关联角色">
            <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联小程序模板" prop="templateId">
          <el-select v-model="param.templateId" class="w400" placeholder="请选择关联小程序模板">
            <el-option v-for="item in temList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="收款模式" prop="payPattern">
          <el-select v-model="param.payPattern" class="w400" placeholder="请选择收款模式">
            <el-option label="商户收款" value="0" />
            <el-option label="场馆收款" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="param.remark"
            class="w400"
            placeholder="请输入备注"
          />
        </el-form-item>
        <el-form-item label="排序码">
          <el-input
            v-model="param.sortNum"
            onkeyup="value=value.replace(/[^\d^\.]/g,'')"
            onkeypress="return event.keyCode>=48&&event.keyCode<=57"
            class="w400"
            placeholder="请输入排序码"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowEdit = false">取 消</el-button>
        <el-button :loading="subLoading" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <Model v-model="isShowModel">
      <div style="padding: 30px">
        <div v-for="item in activeItem.shopNameList" :key="item" style="padding: 6px 20px;">{{ item }}</div>
      </div>
    </Model>
  </div>
</template>

<script>
import { getShopsTypeList, ShopsTypeAdd, ShopsTypeEdit, ShopsTypeDel, getAbleMiniTem, shopRoleList } from '@/api'
import { queryFormConfig, propList, rules } from './config'
import Model from '@/components/Model'
export default {
  components: {
    Model
  },
  data() {
    return {
      propList,
      queryFormConfig,
      rules,
      listLoading: false,
      subLoading: false,
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},

      isShowEdit: false,
      roleList: [],
      temList: [],
      param: {},
      activeItem: {},
      isShowModel: false
    }
  },
  created() {
    this.getList()
    this.meta = this.$route.meta.buttons || []
    // this.getVenueList()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.subLoading = true
          const that = this
          const fn = this.param.id ? ShopsTypeEdit : ShopsTypeAdd
          fn({ param: { ...this.param }}).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              that.$message.success('保存成功')
              that.isShowEdit = false
              that.getList()
            }
          }).catch(() => {
            this.subLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    priviewShops(row) {
      this.isShowModel = true
      this.activeItem = { ...row }
    },
    handleEdit(row) {
      this.isShowEdit = true
      this.param = {}
      this.getParamConfig()
      if (row && row.id) {
        this.param = { ...row }
      }
    },
    getParamConfig() {
      getAbleMiniTem({ param: { status: '1' }}).then(res => {
        this.temList = res.recordList || []
      })
      shopRoleList({ param: { status: '1' }}).then(res => {
        this.roleList = res.recordList || []
      })
    },
    handleDel(row) {
      const that = this
      this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ShopsTypeDel({ param: { id: row.id }}).then(res => {
          that.$message.success('删除成功')
          that.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList(page) {
      const { pagination, filters: param } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      this.listLoading = true
      getShopsTypeList({ pagination, param }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 清空筛选项
    clearFilters() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.Info_wrap {
  padding: 6px 12px;
  text-align: center;
  border-radius: 6px;
}
</style>
